/* color palette from <https://github.com/vuejs/theme> */
:root {
  --starry-sky-primary: #409eff;
  --starry-sky-button-text-color: #fff;

  --starry-sky-text-light: #2c3e50;
  --starry-sky-text-light-hover: #000;
  --starry-sky-text-dark: #ddd;
  --starry-sky-text-dark-hover: #fff;

  --starry-sky-line-light: #444;
  --starry-sky-line-light-hover: #111;
  --starry-sky-line-dark: #ccc;
  --starry-sky-line-dark-hover: #eee;

  --starry-sky-background-light: #f7f7f7;
  --starry-sky-background-light-opacity: rgba(0, 0, 0, 0.5);
  --starry-sky-background-dark: #3b3b3b;
  --starry-sky-background-dark-opacity: rgba(0, 0, 0, 0.5);
}

:root {
  --opera-tool-width: 2.5rem;
  --opera-tool-height: 3.5rem;
  --opera-tool-font-size: 2rem;
  --starry-sky-transition-time: 300ms;
}

html.light {
  --color-text: var(--starry-sky-text-light);
  --color-text-hover: var(--starry-sky-text-light-hover);
  --color-line: var(--starry-sky-line-light);
  --color-line-hover: var(--starry-sky-line-light-hover);
  --color-background: var(--starry-sky-background-light);
  --color-background-opacity: var(--starry-sky-background-light-opacity);
  --color-background-blur: rgba(0, 0, 0, 0.15);
  --color-tool-bg: #e6cfb3;
  --color-tool-bg-1: #e6cfb3ee;
  --color-tool-bg-2: #e6cfb377;
}

html.dark {
  --color-text: var(--starry-sky-text-dark);
  --color-text-hover: var(--starry-sky-text-dark-hover);
  --color-line: var(--starry-sky-line-dark);
  --color-line-hover: var(--starry-sky-line-dark-hover);
  --color-background: var(--starry-sky-background-dark);
  --color-background-opacity: var(--starry-sky-background-dark-opacity);
  --color-background-blur: rgba(255, 255, 255, 0.45);
  --color-tool-bg: #a6808c;
  --color-tool-bg-1: #a6808c77;
  --color-tool-bg-2: #a6808cbb;
}

body {
  box-sizing: border-box;
  margin: 0;
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition: color var(--starry-sky-transition-time),
    background-color var(--starry-sky-transition-time);
  line-height: 1.6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --color-primary: var(--starry-sky-primary);
}
